<template>
    <el-form class="name" inline>
        <el-form-item class="back" @click="router.replace('/home')">
            <el-icon size="20">
                <Back />
            </el-icon>
        </el-form-item>
        <el-form-item label="模型名称 :">
            <el-input v-model="store.modelName" @blur="nameBlur" @keydown.enter="e => e.preventDefault()" clearable
                suffix-icon="edit" />
        </el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
    </el-form>
    <div class="all">
        <!-- <div class="im im1">
            <div>
                <template v-for="im, ix in wenjian" :key="ix">
                    <el-dropdown @click="im.fn" @command="im.fn" split-button class="downdown" v-if="ix == 0">
                        <el-icon>
                            <component :is="im.icon" />
                        </el-icon>
                        {{ im.name }}
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="im1, ix1 in im.gn || 4" :command="ix1">{{ im1
                                    }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
</el-dropdown>
</template>
</div>
<div>
    <template v-for="im, ix in wenjian" :key="ix">
                    <el-dropdown @click="im.fn" @command="im.fn" size="small" split-button v-if="ix > 0">
                        <el-icon>
                            <component :is="im.icon" />
                        </el-icon>
                        {{ im.name }}
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="im1, ix1 in im.gn || 4" :command="ix1">{{ im1
                                    }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
    </el-dropdown>
    </template>
</div>
</div> -->
        <div class="im im2">
            <div :class="`flex-cc fdc jce kuBrowser ${stencil.is && 'is-actived'}`" @click="kuBrowser">
                <img src="/ku.png" alt="">
                库浏览器
            </div>
        </div>
        <div class="im im3">
            <div>
                <div>记录信号</div>
                <div>添加查看器</div>
                <div>信号表</div>
            </div>
            <div></div>
        </div>
        <div class="im im4">
            <el-form size="small" style="width: 120px;margin-right: 20px;">
                <el-form-item label="停止时间">
                    <el-input v-model="data.Time"></el-input>
                </el-form-item>
                <el-form-item label="步长">
                    <el-input v-model="data.stepTime"></el-input>
                </el-form-item>
                <el-form-item label="速度">
                    <el-select v-model="data.speed">
                        <!-- <el-option value="" /> -->
                    </el-select>
                </el-form-item>
            </el-form>
            <template v-for="im in fangzhen" :key="im">
                <div :style="{ '--button--color': im.color }">
                    <el-dropdown @click="im.fn" @command="im.fn" :disabled="im.disabled" split-button class="downdown">
                        <el-icon>
                            <component :is="im.icon" />
                        </el-icon>
                        {{ im.name }}
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="im1, ix1 in im.gn || 4" :command="ix1">
                                    {{ im1 }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </template>
        </div>
        <div class="im im5">
            <el-progress :percentage="progress.p" :status="progress.s" :stroke-width="20" class="progress">
                <template v-if="progress.s === 'discontinue'">
                    <el-icon size="20">
                        <VideoPause />
                    </el-icon>
                </template>
            </el-progress>
        </div>
        <div class="im im6">
            <div>
                <div>数据检查器</div>
            </div>
            <div></div>
        </div>
    </div>
</template>

<script setup>
import {
    DArrowLeft, DArrowRight, FolderOpened, Management,
    VideoPause, VideoPlay, DocumentAdd, Printer
} from '@element-plus/icons-vue'
import { reactive, watch } from 'vue';
import { useStore } from '@/stores';
import { post } from '@/request/axiosset'
import router from '@/router'
import { useRoute } from 'vue-router'

const { fns, attr } = defineProps(['fns', 'attr'])
let { stencil, data, progress } = attr

const store = useStore()
const route = useRoute()


function nameBlur() {
    if (!store.modelName) {
        store.modelName = 'untitled'
    }
    // return console.log('👚', route)
    post('/model-info/name',
        { modelId: store.SavedInformationId, name: store.modelName },
        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(() => {
            const children = [store.modelName, ...route.params.children.split('>').slice(1)].join('>')
            router.replace({ name: 'edit', params: { children: children }, query: route.query })
        })
}
function kuBrowser() {
    stencil.is = !stencil.is
}

let wenjian = [
    // {
    //     name: '新建',
    //     icon: DocumentAdd,
    // },
    // {
    //     name: '打开',
    //     icon: FolderOpened,
    // },
    {
        name: '保存',
        icon: Management,
        gn: ['清空']
    },
    {
        name: '打印',
        icon: Printer,
    },
]
let fangzhen = [
    {
        name: '步退',
        icon: DArrowLeft,
        color: '#82bae0'
    },
    {
        name: '运行',
        icon: VideoPlay,
        color: '#93cc54',
        gn: ['下载']
    },
    {
        name: '步进',
        icon: DArrowRight,
        color: '#93cc54'
    },
    {
        name: '停止',
        icon: VideoPause,
        color: '#a1a1a1'
    },
]
function init() {
    wenjian = wenjian.map(i => ({ ...i, ...fns.find(j => j.name == i.name) }))
    fangzhen = fangzhen.map(i => ({ ...i, ...fns.find(j => j.name == i.name) }))
}
init()
watch(() => fns, () => init(), { deep: true })
// console.log(wenjian, fangzhen);


const save = () => wenjian[0].fn();

</script>

<style scoped>
.name {
    height: 43px;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;

    .el-input {
        width: clamp(100px, 12vw, 500px);
    }
}

.all {
    width: 100%;
    height: calc(100% - 43px);
    padding: 10px 0 0;
    display: flex;

    /* justify-content: space-evenly; */
    .im {
        color: #333;
        font-size: 13px;
        display: flex;
        /* justify-content: center; */
        padding: 0 20px 20px;

        &.im1 {
            --button--color: #f3cb43;

            &>div+div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            &::after {
                content: '文件';
            }
        }

        &.im2 {
            /* display: none; */

            &::after {
                content: '库';
            }
        }

        &.im3 {
            display: none;

            &::after {
                content: '准备';
            }
        }

        &.im4 {
            &::after {
                content: '仿真';
            }
        }

        &.im6 {
            display: none;

            &::after {
                content: '查看结果';
            }
        }

        &+.im {
            border-left: 1px solid #bfbfbf;
        }

        .el-icon {
            font-size: 16px;
            margin-right: 4px;
        }

        position: relative;

        &::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
        }
    }
}

.downdown {
    height: 100%;

    div:has(>&):not(:last-child) {
        margin-right: 20px;
    }

    &>>>.el-button-group {
        display: flex;
        flex-direction: column;
    }

    &>>>.el-button {
        width: 45px;
        width: 45px;
        font-size: 12px;
        background-color: var(--button--color);
        color: #FFF;
        margin: 0;
        height: 100%;
        border: 0;
        border: 1px solid #f5f5f5;
        /* border: 1px solid var(--el-button-border-color); */
        border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
    }

    &>>>.el-button:hover {
        opacity: .65;
    }

    &>>>.el-button>span {
        display: flex;
        flex-direction: column;

        .el-icon {
            font-size: 30px;
            margin: 0 0 5px;
        }
    }

    &>>>.el-button+.el-button {
        height: 22px;
        border-top: 0;
        border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base);
    }

    &>>>.el-dropdown__caret-button::before {
        display: none;
    }
}

.progress {
    width: 300px;
    padding: 20px 0 0;
}

>>>.el-progress-bar__outer,
>>>.el-progress-bar__inner {
    border-radius: 0;
}

.kuBrowser {
    border: 1px solid transparent;
    padding: 0 5px;
    cursor: pointer;

    &.is-actived {
        background-color: #0000001d;
        border-radius: 2px;
        border-color: #7d7d7d;
    }
}

.back {
    width: 30px;
    height: 20px;
    margin: auto 0;
    cursor: pointer;
    border-right: 2px solid #ccc;
}
</style>
